<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>Dojo Slider Widget Demo</title>

		<style type="text/css">
			@import "../../themes/claro/document.css";
			@import "../css/dijitTests.css";
			@import "../../../util/doh/robot/robot.css";
			#slider2 .dijitButtonNode {
				width:12px;
				height:12px;
				border: none;
				font-size:11px;
				padding:0;
			}
		</style>

		<!-- required: the default dijit theme: -->
		<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

		<!-- required: dojo.js -->
		<script type="text/javascript" src="../../../dojo/dojo.js"
			data-dojo-config="isDebug: true, parseOnLoad: true"></script>

		<!-- only needed for alternate theme testing: -->
		<script type="text/javascript" src="../_testCommon.js"></script>

		<script type="text/javascript">
				dojo.require("dijit.dijit"); // optimize: load dijit layer

				dojo.require("dijit.form.HorizontalSlider");
				dojo.require("dijit.form.VerticalSlider");
				dojo.require("dijit.form.HorizontalRule");
				dojo.require("dijit.form.VerticalRule");
				dojo.require("dijit.form.HorizontalRuleLabels");
				dojo.require("dijit.form.VerticalRuleLabels");

				dojo.require("dijit.form.Button");
				dojo.require("dojo.parser"); // scan page for widgets

				// programatic vertical slider and labels
				var programaticExample = function(noSrcNodeRef){

					var node;
					if (!noSrcNodeRef){ node = dojo.byId("programaticSlider"); }
					// or var node = dojo.body().appendChild(document.createElement('div'));

					// setup the rules
					var sliderRules = new dijit.form.VerticalRule({
						count:11,
						style:{width:"5px"}
					}, noSrcNodeRef ? undefined : dojo.create("div", {}, node));

					// setup RuleLabels
					var sliderRuleLabels = new dijit.form.VerticalRuleLabels({
						labels: ["low", "mid", "high"]
					}, noSrcNodeRef ? undefined : dojo.create("div", {}, node));

					// and setup the slider
					var sliderProps = {
						value:1400,
						name:"programaticSlider",
						slideDuration:0,
						onChange:function(val){ dojo.byId('sliderProgInput').value=val; },
						style:{height:"165px"},
						minimum:1000,
						maximum:3000,
						discreteValues:11,
						intermediateChanges:"true",
						showButtons:"true"
					};

					if(noSrcNodeRef){
						// give no-srcNodeRef test instance distinguishable name/id
						sliderProps.id = sliderProps.name = "programmaticSliderNoSrc";
					}

					var theSlider = new dijit.form.VerticalSlider(sliderProps, node);

					if(noSrcNodeRef){
						node = theSlider.containerNode;
						// call placeAt if we're not using srcNodeRef
						theSlider.placeAt("form1");
						sliderRules.placeAt(node);
						sliderRuleLabels.placeAt(node);
					}

					// and start them all
					theSlider.startup();
					sliderRules.startup();
					sliderRuleLabels.startup();
				};
				// test programmatic VerticalSlider/Rule/RuleDef with srcNodeRef
				dojo.ready(programaticExample);
				// test programmatic VerticalSlider/Rule/RuleDef WITHOUT srcNodeRef
				dojo.ready(function(){
					try{
						programaticExample(true);
					}catch(e){
						console.error("BUG #13815", e);
					}
				});
		</script>
	</head>

	<body class="claro">
		<h1 class="testTitle">Slider</h1>
		Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider.
		<br>
		<!--    to test form submission, you'll need to create an action handler similar to
			http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
		<form id="form1" action="" name="example" method="post">
		<br>initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately<br>
		<strong>Horizontal Slider Example</strong>
		<div id="slider1" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='name:"horizontal1",
			onChange:function(val){ dojo.byId("slider1input").value=dojo.number.format(val/100,{places:1,pattern:"#%"}); },
			value:10,
			maximum:100,
			minimum:0,
			pageIncrement:100,
			showButtons:true,
			intermediateChanges:true,
			slideDuration:500,
			style:{width:"50%", height:"20px"}
			'>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"topDecoration", style:{height:"1.2em",fontSize:"75%"}, count:6, numericMargin:1'></ol>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"topDecoration", count:6, style:{height:"5px"}'></div>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:5, style:{height:"5px"}'></div>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em",fontSize:"75%"}'>
					<li>lowest</li>
					<li>normal</li>
					<li>highest</li>
				</ol>
		</div>

		Slider1 Value:<input readonly id="slider1input" size="4" value="10.0%"/>
		<br>
		<button id="disableButton" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ dijit.byId("slider1").set("disabled", true);dijit.byId("disableButton").set("disabled",true);dijit.byId("enableButton").set("disabled",false); }'>Disable previous slider</button>
		<button id="enableButton" data-dojo-type="dijit/form/Button" data-dojo-props='onClick:function(){ dijit.byId("slider1").set("disabled",false);dijit.byId("disableButton").set("disabled",false);dijit.byId("enableButton").set("disabled", true); }, disabled:true'>Enable previous slider</button>
		<br>
		<br>initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away<br>
		<strong>Vertical Slider Example</strong>
		<div id="slider2" data-dojo-type="dijit/form/VerticalSlider" data-dojo-props='name:"vertical1",
			onChange:function(val){ dojo.byId("slider2input").value = val; },
			value:10,
			maximum:100,
			minimum:0,
			discreteValues:11,
			style:{height:"300px"}
			'>
				<ol data-dojo-type="dijit/form/VerticalRuleLabels" data-dojo-props='container:"leftDecoration", style:{width:"2em"}, labelStyle:"right:0px;"'>
					<li>0</li>
					<li>100</li>
				</ol>
				<div data-dojo-type="dijit/form/VerticalRule" data-dojo-props='container:"leftDecoration", count:11, style:{width:"5px"}, ruleStyle:"border-color: #888"'></div>
				<div data-dojo-type="dijit/form/VerticalRule" data-dojo-props='container:"rightDecoration", count:11, style:{width:"5px"}, ruleStyle:"border-color: #888"'></div>
				<ol data-dojo-type="dijit/form/VerticalRuleLabels" data-dojo-props='container:"rightDecoration", style:{width:"2em"}, count:6, numericMargin:1, maximum:100, constraints:{pattern:"#"}'></ol>
		</div>
		Slider2 Value:<input readonly id="slider2input" size="3" value="10"/>
		<h1>Fancy HTML labels (no slide animation):</h1>
		<div id="slider3" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='name:"horizontal2",
			title:"Fancy HTML Labels",
			minimum:1,
			value:2,
			maximum:3,
			discreteValues:3,
			showButtons:false,
			intermediateChanges:true,
			slideDuration:0,
			style:"width:300px; height: 40px;"
			'>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:3, style:{height:"5px"}'></div>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em", fontSize:"75%"}'>
					<li><img width=10 height=10 src="../images/note.gif"/><br><span style="font-size: small">small</span></li>
					<li><img width=15 height=15 src="../images/note.gif"/><br><span style="font-size: medium">medium</span></li>
					<li><img width=20 height=20 src="../images/note.gif"/><br><span style="font-size: large">large</span></li>
				</ol>
		</div>

		<p></p><h1>Standalone ruler example:</h1><p></p>

		<div style="width:2in;border-top:1px solid black;">
			<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:17, style:{height:".4em"}'></div>
			<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:9, style:{height:".4em"}'></div>
			<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:5, style:{height:".4em"}'></div>
			<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='count:3, style:{height:".4em"}'></div>
			<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='labelStyle:"font-style:monospace;fontSize:.7em;margin:-1em 0px 0px -.35em;"'>
				<li></li>
				<li>1</li>
				<li>2</li>
			</ol>
		</div>

		<h1>horizontal, with buttons, disabled (to show styling):</h1>

		<div id="sliderH2" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='name:"horizontalH2",
			onChange:function(val){ dojo.byId("slider1input").value = val; },
			value:10,
			maximum:100,
			minimum:0,
			disabled:true,
			showButtons:true,
			intermediateChanges:true,
			style:{width:"50%", height:"20px"}
			'>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"topDecoration", style:{height:"1.2em", fontSize:"75%"}, count:7, constraints:{pattern:"#.00%"}'></ol>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"topDecoration", count:7, style:"height:5px;"'></div>
				<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:5, style:"height:5px;"'></div>
				<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em", fontSize:"75%"}'>
					<li>lowest</li>
					<li>normal</li>
					<li>highest</li>
				</ol>
		</div>


		<h2>Completely Programatic VerticalSlider and VerticalRule</h2>
		<h3>min:1000, max:3000, 11 discrete values, no animation</h3>

		<div id="programaticSlider"></div>
		Programmatic Value:<input readonly id="sliderProgInput" size="5" value="1400"/>

		        <script>
				// so robot can get to it easily
				document.displayData=function(){
					var f = document.getElementById("form1");
					var s = "";
					for(var i = 0; i < f.elements.length; i++){
						var elem = f.elements[i];
						if(elem.nodeName.toLowerCase() == "button" || elem.type=="submit" || elem.type=="button")  { continue; }
						s += elem.name + ": " + elem.value + "\n";
					}
					return s;
				}
		        </script>

		        <div>
                		<button name="button" onclick="alert(displayData()); return false;">view data</button>
        		        <input type="submit" name="submit" />
		        </div>

		</form>
	</body>
</html>
